@tailwind base;
/* 基础样式包括一些现代化的重置样式（比如使用 Normalize.css 或是 Reboot），它设置了一些基础的样式，如默认的字体大小、边距、
盒模型的行为等。这确保了在不同浏览器中有一致的渲染，并且为使用 Tailwind 提供的实用工具类建立了一个干净的基线。例如，它包
含了对 body 标签、所有的标题（h1-h6）、按钮等的基础样式设置。 */
@tailwind components;
/* 在这一层中，你可以定义更复杂的组件类，这些类可能包含多个实用工具类的组合，以及任何你可能需要的特定组件样式。这是为了构建 UI 组件，
如按钮、卡片、导航栏等。虽然 Tailwind CSS 主要是一个实用工具优先的框架，但组件层让你有机会抽象和重用频繁使用的模式，而不是在项目
中重复相同的实用工具类。 */
@tailwind utilities;
/* 这个指令导入了 Tailwind 的实用工具类，这是 Tailwind CSS 最核心的部分。实用工具类包括边距、填充、字体大小、颜色、显示方式等几乎所有
的 CSS 属性。这些工具类设计得非常细致，可以通过组合它们来快速构建任何设计。这层是 Tailwind 的主要创新之处，提供了数以千计的类，使得
通过 HTML 类直接在标记中应用样式成为可能。 */


.btn {
  @apply text-custom-gray bg-black cursor-pointer transition-all duration-300 tracking-wider text-center outline-none border-2 border-custom-gray rounded-md;
}
.btn:hover {
  @apply text-turquoise border-2 border-turquoise;
}
.btn.delete:hover {
  @apply text-red border-2 border-red;
}
.custom-shadow{
  box-shadow: 0px 0px 50px 1px rgb(85 85 85 / 100%) inset;
}
.custom-shadow-meun{
  box-shadow: 0px 0px 3px 1px rgb(67 67 67) inset;
}
.custom-shadow-meun:hover{
  box-shadow: 0px 0px 3px 1px rgb(16 185 185) inset;
}


body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
.triangle-after::after{
  content: "";
  position: absolute;
  top: 20%;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(121, 121, 121, 0.3);
}

